<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div class="login_box">
    <div class="login" :class="{ Filter: isFilter, Shadow: isShadow }">
      <!-- title -->
      <div class="title">
        <h1>登录</h1>
        <p>请输入您的帐号及密码</p>
        <p>即刻体验最新服务！</p>
      </div>
      <!-- username password -->
      <div class="infoBox">
        <div class="infoInput">
          <span>账号</span>
          <input
            type="text"
            placeholder="请输入账号"
            maxlength="16"
            minlength="1"
            v-model="userName"
            @blur="appearValidation"
          />
        </div>
        <div class="infoInput">
          <span>密码</span>
          <input
            class="inputBox"
            :type="pwdType"
            placeholder="请输入密码"
            maxlength="16"
            minlength="1"
            v-model="password"
          />
          <img
            v-if="eyeImg"
            slot="right-full-height"
            src="@/pages/mobile/assets/img/shouEye.png"
            @click="chengShowPwd"
          />
          <img
            v-else
            slot="right-full-height"
            src="@/pages/mobile/assets/img/suteEye.png"
            @click="chengShowPwd"
          />
        </div>
      </div>
      <!-- show-button -->
      <box>
        <x-button
          type="primary"
          class="submit"
          :class="{ submitNext: isSubmitNext }"
          @click.native="loginInfo"
          >登录</x-button
        >
        <!-- <x-button v-else type="primary" class="submit" show-loading>登录</x-button> -->
      </box>
    </div>
    <!-- 隐藏区域 -->
    <!-- 验证码 -->
    <transition v-if="validationBox">
      <div class="validationPopout">
        <div
          class="boxValidationPopout"
          :class="{ validationPopoutStyle: isValidationPopoutStyle }"
        >
          <span>请输入验证码</span>
          <img
            class="PopoutShutImg"
            src="@/pages/mobile/assets/img/error.png"
            @click="shutvalidation"
            alt
          />
          <div class="validationInfoBox">
            <input
              type="text"
              placeholder="请输入"
              ref="inputVal"
              v-model="inputValue"
              maxlength="4"
            />
            <img class="validationImg" :src="validationQueryImg" alt />
          </div>
          <img
            class="refreshValidationImg"
            :class="{ validationrotate: isValidationrotate }"
            src="@/pages/mobile/assets/img/refresh.png"
            @click="refreshQuery"
            alt
          />
          <div class="btn" @click="shutvalidationBox">
            {{ validationTitle }}
          </div>
        </div>
      </div>
    </transition>
    <!-- 错误弹框 -->
    <div v-if="loginErrorBox" class="loginErrorPopout" ref="loginErrorPopout">
      <div class="boxloginErrorPopout">
        <span>提示</span>
        <p>用户名或密码错误，请确认后</p>
        <P>再次重新输入！</P>
        <div class="btn" @click="errorInfoPopout">我知道了</div>
      </div>
    </div>
  </div>
</template>

<script>
import { XInput, Group, Alert, XSwitch, XButton, Cell, Box } from "vux";
export default {
  components: {
    XInput,
    XButton,
    Group,
    Box,
    Alert,
    XSwitch
  },
  data () {
    return {
      isValidationPopoutStyle: false, // 验证码抖动
      isValidationrotate: false, //验证码旋转
      isFilter: false, // 信息弹框背景
      loginErrorBox: false, //  信息错误弹框
      validationBox: false, //  验证码弹框
      isShadow: false, //  验证码背景样式
      validationTitle: "确定", //  验证码验证
      eyeImg: true, //  切换显示隐藏密码
      inputValue: "", //  验证码的值
      isSubmitNext: false, //  登录按钮颜色
      show: true,
      pwdType: "password",
      userName: "",
      password: "",
      buttonShow: true,
      validationQueryImg: this.$baseUrl + "/joys-rest/joys-auth/auth/vcode",

      // 请求数据
      userNameInfo: ""
    };
  },
  props: {},
  watch: {
    password () {
      if (this.userName.length > 1 && this.password.length > 5) {
        this.isSubmitNext = true;
      }
    }
  },
  filters: {},
  methods: {
    // 点击刷新验证码
    refreshQuery () {
      // this.isValidationrotate = true;
      this.validationQueryImg =
        this.$baseUrl + "/joys-rest/joys-auth/auth/vcode?" + Math.random();
    },
    // 离开账号输入框弹出验证码
    appearValidation () {
      this.validationBox = true;
      this.isShadow = true;
      this.$nextTick(function () {
        //DOM 更新了
        this.$refs.inputVal.focus();
      });
    },
    // 显示和隐藏密码
    chengShowPwd () {
      this.eyeImg = !this.eyeImg;
      this.pwdType = this.pwdType === "password" ? "text" : "password";
    },
    // 登录验证
    loginInfo () {
      this.$axios({
        method: "post",
        url: "/joys-rest/joys-auth/auth/login",
        data: {
          password: this.password,
          userCode: this.userName
        }
      })
        .then(res => {
          console.log(res, "shuju");
          this.buttonShow = false;
          // 登录成功，把token记录到本地存储中
          localStorage.setItem("AUTH-TOKEN", res.data);
          this.$router.push({
            path: "/Nav"
          });
          this.password = "";
        })
        .catch(error => {
          this.loginErrorBox = true;
          this.isFilter = true;
          this.password = "";
        });
    },
    // 点击关闭账号密码错误提示框
    errorInfoPopout () {
      this.loginErrorBox = false;
      this.isFilter = false;
    },
    // 点击x关闭验证码输入框
    shutvalidation () {
      this.validationBox = false;
      this.isShadow = false;
    },
    //  验证码判断是否正确
    shutvalidationBox () {
      this.$axios({
        method: "post",
        url: "/joys-rest/joys-auth/auth/verify",
        params: {
          apiDescription: "verify",
          vcode: this.inputValue
        }
      })
        .then(res => {
          console.log(res);
          if (res.data) {
            this.validationBox = false;
            this.isShadow = false;
            this.inputValue = "";
          } else {
            this.isValidationPopoutStyle = true;
            this.validationTitle = "验证码错误，请重新输入";
            setTimeout(() => {
              this.validationTitle = "确定";
              this.isValidationPopoutStyle = false;
              // this.refreshQuery();
              this.inputValue = "";
            }, 700);
          }
        })
        .catch(error => { });
    }
  },
  computed: {},
  created () {
    // this.validationquery();
  },
  mounted () { },
  destroyed () { }
};
</script>
<style scoped lang="less">
.login_box {
  position: fixed;
  top: 0rem;
  left: 0rem;
  z-index: 200;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // 错误框框背景
  .Filter {
    filter: blur(12px);
    background: rgba(0, 0, 0, 0.08);
  }
  // 验证码背景
  .Shadow {
    background: rgba(0, 0, 0, 0.7);
    filter: blur(8px);
  }
  .login {
    overflow: hidden;
    box-sizing: border-box;
    background-color: #fff;
    height: 100%;
    overflow: hidden;
    padding: 0.35rem 0.32rem 0 0.32rem;
    .title {
      font-family: Mediums;
      font-size: 0.34rem;
      color: #030303;
      letter-spacing: 0;
      line-height: 0.44rem;
      h1 {
        font-family: Mediums;
        font-size: 0.34rem;
        color: #030303;
        letter-spacing: 0;
        line-height: 0.44rem;
        margin-bottom: 0.12rem;
        font-weight: 700;
      }
      p {
        font-family: Regular;
        font-size: 0.18rem;
        color: #585c64;
        letter-spacing: 0;
        line-height: 0.3rem;
      }
    }
    .infoBox {
      overflow: hidden;
      .infoInput {
        overflow: hidden;
        width: 100%;
        height: 0.56rem;
        // line-height: 0.56rem;
        background: #f2f2f2;
        margin-top: 0.12rem;
        span {
          font-family: Regular;
          font-size: 0.18rem;
          color: #030303;
          letter-spacing: 0;
          display: inline-block;
          width: 0.5rem;
          height: 0.56rem;
          line-height: 0.56rem;
          padding-left: 0.14rem;
          padding-right: 0.24rem;
        }
        input {
          font-family: SIL-Hei-Med-Jian;
          font-size: 0.18rem;
          color: #030303;
          letter-spacing: 0;
          display: inline-block;
          width: calc(~"100% - 1.5rem");
          // height: 0.56rem;
          line-height: 0.29rem;
          background: #f2f2f2;
          input-placeholder {
            font-family: Regular;
            font-size: 0.18rem;
            color: #bdbdc4;
            letter-spacing: 0;
            line-height: 0.18rem;
          }
        }
        img {
          float: right;
          overflow: hidden;
          width: 0.18rem;
          height: 0.18rem;
          padding: 0.2rem 0.12rem 0.13rem 0rem;
          line-height: 0.56rem;
          background-size: 0.2rem;
          opacity: 0.7;
        }
      }
    }
    // button
    .submit {
      background-color: #d9d9d9;
      font-family: Mediums;
      font-size: 0.2rem;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
      margin-top: 0.36rem;
      border-radius: 0rem;
      height: 0.56rem;
      line-height: 0.56rem;
    }
    // 密码输入正确button颜色
    .submitNext {
      background-color: #be9457 !important;
    }
  }
  // 验证码弹框
  .validationPopout {
    z-index: 9;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background: rgba(0, 0, 0, 0.7);
    display: block;
    .boxValidationPopout {
      border-radius: 5px;
      // height: 1.4rem;
      width: 2.7rem;
      // position: fixed !important; /* 浮动对话框 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -100%);
      z-index: 5;
      border-radius: 5px;
      font-size: 0.17rem;
      line-height: 0.2rem;
      // padding: 0.1rem 0.2rem;
      color: #414244;
      letter-spacing: 0;
      background: #ffffff;
      border-radius: 4px;

      span {
        font-family: Semibold;
        display: block;
        margin-top: 0.19rem;
        font-size: 0.17rem;
        color: #000000;
        letter-spacing: -0.41px;
        text-align: left;
        line-height: 0.22rem;
        margin-left: 0.16rem;
        font-family: PingFangSC-Regular;
        font-size: 17px;
        color: #333333;
        letter-spacing: -0.41px;
        line-height: 22px;
      }
      .PopoutShutImg {
        width: 0.2rem;
        height: 0.2rem;
        padding: 0.1rem;
        float: right;
        margin-top: -0.4rem;
      }
      .validationInfoBox {
        margin-left: 0.16rem;
        width: 2.07rem;
        height: 0.36rem;
        background: #ffffff;
        border: 1px solid #f1f1f1;
        margin-top: 0.04rem;
        line-height: 0.36rem;
        display: inline-block;
        input {
          float: left;
          width: 1.12rem;
          height: 0.36rem;
          line-height: 0.36rem;

          margin-left: 0.08rem;
          input-placeholder {
            /* WebKit, Blink, Edge */
            font-family: Regular;
            font-size: 0.13rem;
            color: #c6c6c6;
            letter-spacing: -0.31px;
            line-height: 0.13rem;
          }
        }
        .validationImg {
          width: 0.85rem;
          float: right;
          height: 0.36rem;
        }
      }
      .refreshValidationImg {
        padding: 0.1rem;
        width: 0.2rem;
        float: right;
        margin-left: -0.1rem;
        margin-right: 0.04rem;
        overflow: hidden;
        margin-top: 0.02rem;
      }
      p {
        display: block;
        font-size: 0.13rem;
        color: #000000;
        letter-spacing: -0.08px;
        text-align: center;
        line-height: 0.18rem;
        font-family: Regular;
      }
      .btn::before {
        background: #3f3f3f;
        background: rgba(0, 0, 80, 0.05);
        height: 2px;
        content: "";
        width: 100%;
        display: block;
      }
      .btn {
        font-family: Semibold;
        margin-top: 0.18rem;
        width: 100%;
        height: 0.43rem;
        line-height: 0.43rem;
        background-size: 100% 100%;
        font-size: 0.17rem;
        color: #d62f17;
        letter-spacing: -0.41px;
        text-align: center;
        font-weight: 700;
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #265ca7;
      }
    }
    .validationPopoutStyle {
      animation: wobble 0.5s reverse;
    }
  }
  // 规则弹窗
  .loginErrorPopout {
    z-index: 9;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed !important; /* 浮动对话框 */
    position: absolute;
    top: 110%;
    left: 50%;
    display: block;
    .boxloginErrorPopout {
      border-radius: 5px;
      height: 1.63rem;
      width: 2.7rem;
      position: fixed !important; /* 浮动对话框 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 5;
      border-radius: 5px;
      font-size: 0.17rem;
      line-height: 0.2rem;
      // padding: 0.1rem 0.2rem;
      color: #414244;
      letter-spacing: 0;
      background: #ffffff;
      border-radius: 4px;

      span {
        font-family: PingFangSC-Regular;
        display: block;
        margin-top: 0.19rem;
        margin-bottom: 0.08rem;
        font-size: 0.2rem;
        text-align: center;
        line-height: 0.2rem;
        height: 0.22rem;
        color: #111a34;
        letter-spacing: -0.48px;
        text-align: center;
      }
      p {
        display: block;
        font-size: 0.14rem;
        text-align: center;
        line-height: 0.22rem;
        font-family: PingFangSC-Regular;
        color: #575d6f;
        letter-spacing: -0.34px;
        text-align: center;
      }
      .btn::before {
        background: #3f3f3f;
        background: rgba(0, 0, 80, 0.05);
        height: 2px;
        content: "";
        width: 100%;
        display: block;
      }
      .btn {
        font-family: Semibold;
        margin-top: 0.18rem;
        width: 100%;
        height: 0.43rem;
        line-height: 0.43rem;
        background-size: 100% 100%;
        font-size: 0.17rem;
        letter-spacing: -0.41px;
        text-align: center;
        font-weight: 700;
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #265ca7;
      }
    }
  }
  // 刷新旋转动画
  .validationrotate {
    animation: validationrotate 1.2s linear infinite;
  }
  // 刷新旋转动画集
  @keyframes validationrotate {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  // 验证码抖动动画集
  @keyframes wobble {
    from {
      -webkit-transform: translate(-50%, -100%) rotate(0deg);
      transform: translate(-50%, -100%) rotate(0deg);
    }

    15% {
      -webkit-transform: translate(-50%, -100%) rotate(-5deg);
      transform: translate(-50%, -100%) rotate(-5deg);
    }

    30% {
      -webkit-transform: translate(-50%, -100%) rotate(3deg);
      transform: translate(-50%, -100%) rotate(3deg);
    }

    45% {
      -webkit-transform: translate(-50%, -100%) rotate(-3deg);
      transform: translate(-50%, -100%) rotate(-3deg);
    }

    60% {
      -webkit-transform: translate(-50%, -100%) rotate(2deg);
      transform: translate(-50%, -100%) rotate(2deg);
    }

    75% {
      -webkit-transform: translate(-50%, -100%) rotate(-1deg);
      transform: translate(-50%, -100%) rotate(-1deg);
    }

    to {
      -webkit-transform: translate(-50%, -100%) rotate(0deg);
      transform: translate(-50%, -100%) rotate(0deg);
    }
  }
}
</style>
